<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-02-21 16:57:55
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 21:51:00
 * @FilePath: \hrManage\src\views\permission\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary" @click="show(0)">添加权限</el-button>
      <el-table :data="perList" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button v-if="row.type === 1" size="mini" type="text" @click="show(row.id,row.pid)">添加</el-button>
            <el-button size="mini" type="text" @click="update(row.id)">编辑</el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="remove(row.id)"
            >
              <el-button slot="reference" size="mini" type="text" style="margin-left:10px">删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <!-- 添加/编辑弹层 -->
      <el-dialog title="添加权限" :visible.sync="isShow">
        <el-form ref="perForm" :model="formData" :rules="formDataRule" label-width="100px">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" size="mini" style="width:310px" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" size="mini" style="width:310px">结构2</el-input>
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" size="mini" style="width:310px">结构3</el-input>
          </el-form-item>
          <el-form-item label="开启" prop="enVisible">
            <el-switch v-model="formData.enVisible" size="mini" :active-value="1" :inactive-value="0">结构四</el-switch>
          </el-form-item>
          <el-row type="flex" justify="center">
            <el-button v-if="formData.id" type="primary" @click="isOk">确认修改</el-button>
            <el-button v-else type="primary" @click="isOk">确认添加</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-row></el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { addPermission, getPermission, getPermissionDetail, removePermission, updatePermission } from '@/api/permission'
import { getDepartmentTree } from '@/utils/'
export default {
  name: 'Permission',
  data() {
    return {
      perList: [],
      isShow: false,
      formData: {
        name: '',
        code: '',
        description: '',
        type: 1,
        pid: 0,
        enVisible: 0
      },
      formDataRule: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { trigger: 'blur', validator: async(rule, value, callback) => {
            // eslint-disable-next-line no-unused-vars
            let res = await getPermission()
            if (this.formData.id) {
              res = res.filter(item => {
                return item.id !== this.formData.id
              })
            }
            if (res.some(item => {
              return item.name === value
            })) {
              callback(new Error('权限名称重复'))
            } else {
              callback()
            }
          } }
        ],
        code: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { trigger: 'blur', validator: async(rule, value, callback) => {
            // eslint-disable-next-line no-unused-vars
            let res = await getPermission()
            if (this.formData.id) {
              res = res.filter(item => {
                return item.id !== this.formData.id
              })
            }
            if (res.some(item => {
              return item.code === value
            })) {
              callback(new Error('权限标识重复'))
            } else {
              callback()
            }
          } }
        ],
        description: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    async getPermission() {
      this.perList = getDepartmentTree(await getPermission(), 0)
    },
    cancel() {
      this.formData = {
        name: '',
        code: '',
        description: '',
        type: 1,
        pid: 0,
        enVisible: 0
      }
      this.isShow = false
      this.$refs.perForm.resetFields()
    },
    isOk() {
      this.$refs.perForm.validate(async(isOk) => {
        if (isOk) {
          if (this.formData.id) {
            await updatePermission(this.formData)
            this.$message.success('修改成功')
          } else {
            console.log('正在进行添加')
            await addPermission(this.formData)
            this.$message.success('添加成功')
          }
          this.getPermission()
          this.cancel()
        } else {
          return false
        }
      })
    },
    show(id, pid) {
      console.log(id, pid)
      this.isShow = true
      this.formData.pid = id
      if (pid === 0) {
        this.formData.type = 2
      }
    },
    async remove(id) {
      await removePermission(id)
      this.$message.success('删除成功')
      this.getPermission()
    },
    async update(id) {
      this.formData = await getPermissionDetail(id)
      this.isShow = true
    }
  }
}
</script>
<style>
.btn-add {
  margin: 10px;
}
</style>
